window.onload = function() {
  var app_insta_html_v1 = '\
<div class="insta-stories-header-body" id="insta-stories-header-body"></div>\
';

let insta_v1_selector = document.getElementById('instafeed-instagram-feed');
console.log(insta_v1_selector);
insta_v1_selector.innerHTML = app_insta_html_v1;
var shopdomain = Shopify.shop;
let INSTA_FEEDS_TYPE = insta_v1_selector.getAttribute("data-type");
let INSTA_BASE_URL = "https://phpstack-815750-2800305.cloudwaysapps.com";
var more_videos = "";
  async function getStories() {
    let url = INSTA_BASE_URL + "/shop-stories?shop=" + shopdomain + "&feed_type=" + INSTA_FEEDS_TYPE + "&after=" + more_videos;
    try {
      let res = await fetch(url);
      if (INSTA_FEEDS_TYPE == "STORY" || INSTA_FEEDS_TYPE == "HIGHLIGHT") 
        return await res.json();
      



      return await res.text();
    } catch (error) {
      console.log(error);
    }
  }


  async function renderHeader() {
    let data = await getStories();
    let html = data;

    let container = document.querySelector('.insta-stories-header-body');
    if (INSTA_FEEDS_TYPE == "STORY" || INSTA_FEEDS_TYPE == "HIGHLIGHT") {
      var stories_settings = data.story_settings;
      var first_color = "#3f729b";
      var bg = first_color;
      var alignment = 'left';
      var stories_gap = 10;
      var desktop_width = 90;
      var mobile_width = 70;
      if (stories_settings.color_type == "S") {
        bg = stories_settings.first_color;
      } else if (stories_settings.color_type == "G") {
        bg = 'linear-gradient(' + stories_settings.angle + ', ' + stories_settings.first_color + ', ' + stories_settings.second_color + ')';
      }
      if(stories_settings.alignment != "")
      {
        alignment = stories_settings.alignment;
      }
       if(stories_settings.gap != "")
      {
        stories_gap = stories_settings.stories_gap;
      }
       if(stories_settings.desktop_width != "")
      {
        desktop_width = stories_settings.desktop_width;
      }
       if(stories_settings.mobile_width != "")
      {
        mobile_width = stories_settings.mobile_width;
      }
      html = '<div id="stories"></div>\<style>.item-preview img{background:'+bg+' !important;}#stories{justify-content: '+alignment+';gap: '+stories_gap+'px;} .story{margin: 0px !important;}\
        \.stories.carousel .story>.item-link>.item-preview img{width: '+desktop_width+'px!important;height: '+desktop_width+'px!important;}#stories .story{width: '+desktop_width+'px!important;height: '+desktop_width+'px!important;}</style>';
      container.innerHTML = html;
      let data111 = await init_stories(data.stories);

    } else {
      container.innerHTML = html;
    }

    if (INSTA_FEEDS_TYPE == "FEEDS" || INSTA_FEEDS_TYPE == "REELS") {
      let hasSlider = document.getElementById('hasSliderLayout').value;
      if (hasSlider == 1) 
        SliderCall();
      



      let nextvideopage = document.getElementById('load-more-btn');
      if(nextvideopage != undefined && nextvideopage != "")
      {
        nextvideopage.addEventListener("click", function() {
          var element = document.getElementById('load-more-btn');
          more_videos = element.getAttribute("data-cursor");
          renderHeader();
        });
      }
     
    }
  }



  renderHeader();
  async function init_stories(stories_data) {
    console.log(stories_data)
    var stories_array = [];


    var stories = new Zuck('stories', {
      backNative: true,
      previousTap: true,
      skin: "Snapgram",
      autoFullScreen: true,
      avatars: true,
      paginationArrows: true,
      list: false,
      cubeEffect: true,
      localStorage: true,
      stories: []
    });

    if (INSTA_FEEDS_TYPE == "HIGHLIGHT") {
      var stories_users = stories_data;
      stories_users.map(function myFunction(item, index, array) {
        child_stories = [];
        var sub_stories = item.reels;
        sub_stories.map(function myFunction(reel, index1, array1) {
          child_stories.push([
            "story" + index1,
            "photo",
            3,
            reel.image,
            reel.image,
            '',
            false,
            false,
            timestamp()
          ]);
        });
        console.log(child_stories);
        stories.update(Zuck.buildTimelineItem("story-" + index, item.image, "", "javascript:void()", 1675682208.67, child_stories));
      });
    } else {


      var stories_users = stories_data;
      stories_users.map(function myFunction(item, index, array) {
        stories.update(Zuck.buildTimelineItem("story-" + index, item.image, "", "javascript:void()", 1675682208.67, [[
            "story" + index,
            "photo",
            3,
            item.image,
            item.image,
            '',
            false,
            false,
            timestamp()
          ]]));
      });
    }



  }

  var timestamp = function() {
    var timeIndex = 0;
    var shifts = [
      35,
      60,
      60 * 3,
      60 * 60 * 2,
      60 * 60 * 25,
      60 * 60 * 24 * 4,
      60 * 60 * 24 * 10
    ];

    var now = new Date();
    var shift = shifts[timeIndex++] || 0;
    var date = new Date(now - shift * 1000);

    return date.getTime() / 1000;
  };
  function SliderCall() {
    const slides = document.querySelectorAll(".slide");

    slides.forEach((slide, indx) => {
      slide.style.transform = `translateX(${
        indx * 100
      }%)`;
    });

    const nextSlide = document.querySelector(".instafeed-btn-next");
    let curSlide = 0;
    let maxSlide = slides.length - 2;

    nextSlide.addEventListener("click", function() {
      if (curSlide === maxSlide) {
        curSlide = 0;
      } else {
        curSlide++;
      } slides.forEach((slide, indx) => {
        slide.style.transform = `translateX(${
          100 * (indx - curSlide)
        }%)`;
      });
    });

    const prevSlide = document.querySelector(".instafeed-btn-prev");

    prevSlide.addEventListener("click", function() {
      if (curSlide === 0) {
        curSlide = maxSlide;
      } else {
        curSlide--;
      }

// move slide by 100%
      slides.forEach((slide, indx) => {
        slide.style.transform = `translateX(${
          100 * (indx - curSlide)
        }%)`;
      });
    });
  }
};